<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../css/style.css"/>
      <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
      <style>
        body{}
        .no-data{width:100%; text-align:center; padding:25px;}
        .login-btn{
          width:150px; height:50px; line-height:50px; background:#e2e2e2; margin:0px auto 20px auto;
        }
        .tit{width:100%; height:76px; line-height:76px; font-size:18px; color:#808080; text-align:center;}
        .list-w{padding-bottom:50px;}
        .one{
          width:100%; height:83px; line-height:80px;
          border-bottom:3px solid #f2f2f2; background:#fff;
        }
        .one .t{padding-left:25px; color:#666; font-weight:bold; font-size:20px;}
        .one .icon{width:80px; height:80px; text-align:right; line-height:80px; padding-right:20px;}
        .one .icon i{font-size:24px; color:#999;}
      </style>
  </head>
  <body>
      <div id="App" class="hide">
        <div class="no-data" v-show="is_download==0">
          <div class="login-btn" tapmode="" onclick="vue.gotoLogin()">初始化语音导览</div>
        </div>
        <div v-show="is_download==1">
          <div class="tit">{{museum.name}}语音讲解</div>
          <div class="list-w">
            <div class="one dflex" tapmode="" v-for="(v, k) in museums" @click="gotoALbums(k);">
              <div class="t flex-1">{{v.name}}</div>
              <div class="icon"><i class="iconfont icon-right1"></i></div>
            </div>
          </div>
        </div>
      </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/vue.min.js"></script>
  <script type="text/javascript">
      var vue;
      apiready = function(){
        vue = new Vue({
            el: '#App',
            data: {
              is_download:0,
              museum:{},
              museums:[],
            },
            methods: {
                init:function(){

                },
                gotoALbums: function(k){
                  var that = this;
                  var did = that.museums[k].did;
                  var name = that.museums[k].name;
                  var byname = that.museums[k].byname;

                  api.openWin({
                      name: 'Albums',
                      url: 'Albums.html',
                      pageParam: {did:did, name:name, byname:byname}
                  });
                },
                gotoLogin:function(){
                  api.openWin({
                      name: 'Login',
                      url: 'Login.html',
                      pageParam: {name: 'test'}
                  });
                }
            },
            created: function() {
              var that = this;
              var is_download = $api.getStorage("download");
              var is_download = (!is_download || is_download==undefined || is_download==null || is_download=="")?0:is_download;
              that.is_download = is_download;
              if(is_download==1){
                that.museum = $api.getStorage('destination');
                that.museums = $api.getStorage('destinations');
              }
              $api.removeCls($api.byId('App'), 'hide');
              setTimeout(function(){
                api.parseTapmode();
              }, 1000);
            }
        });
      };
  </script>
  </html>
